<template>
  <div class="all">
    <div class="Course" v-if="!chapter">
      <div class="Course-container" v-show="courseList.length > 0">
        <a-card style="width: 96%; margin: 0 auto">
          <div class="head">
            <a-input placeholder="请输入课程名称" class="rounded-input" style="width: 300px" @keyup.enter="handleSearch">
              <template #prefix>
                <a-icon type="search" />
              </template>
            </a-input>
            <a-button type="primary" @click="handleAdd" v-auth="'course:add'">创建课程</a-button>
          </div>
          <div class="content">
            <div class="coureItem" v-for="item in courseList" :key="item.id">
              <div class="left">
                <img :src="item.annex || courseImg" />
              </div>
              <div class="right">
                <div class="title">{{ item.courseName }}</div>
                <div class="courseAim flx">
                  <div class="subtitle">课程目标:</div>
                  <span class="txt">{{ item.courseDescribe }}</span>
                </div>
                <!--  <div class="studyNumber flx">
                  <div class="subtitle">学习人数:</div>
                  <span>204人</span>
                </div> -->
                <div class="chapter flx">
                  <div class="subtitle">课程章节:</div>
                  <span>{{ item.chapterSum }} </span>
                </div>
                <div class="updatetime flx">
                  <div class="subtitle">创建时间: </div>
                  <span>{{ item.createTime }}</span>
                </div>
              </div>

              <div class="buttonGroup">
                <a-button style="background-color: 'darkgrey'" size="small" @click="handleChapter(item)" v-auth="'course:chapter'">章节管理</a-button>
                <a-button type="primary" ghost @click="handleEdit(item)" size="small" v-auth="'course:edit'">编辑</a-button>
                <a-button type="primary" @click="handlePublish(item)" size="small" :disabled="item.courseRelease === 1" v-auth="'course:publish'"
                  >立即发布</a-button
                >
                <a-button danger ghost @click="handleDelete(item)" size="small" v-auth="'course:delete'">删除</a-button>
              </div>
            </div>
          </div>
          <pagenation :total="total" @page-change="handlePageChange" @size-change="handleSizeChange" />
        </a-card>
        <!-- 分页组件 -->
      </div>
      <div class="noCourse" v-show="courseList.length === 0">
        <div class="noCourse-content">
          <a-button type="primary" @click="handleAdd" class="noCourceBtn" v-auth="'course:add'">创建课程</a-button>
          <div class="imgtip">
            <img :src="EmptyImg" />
            <span style="font-size: 18px">暂无课程</span>
          </div>
        </div>
      </div>
      <SchoolCourseModal @register="registerModal" @success="handleSuccess" />
    </div>
    <div class="chapters" v-if="chapter">
      <div class="chapterTree"><CourseChapter @coure-name="handleCourseName" @selected-node="handleSelected" @goback="handleback" /> </div>
      <div class="editor">
        <div class="head"><a-button type="primary" class="right-button" @click="addChapter">保存</a-button></div>
        <JEditor placeholder="请输入章节内容" v-model:value="content" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="Course">
  import { ref, onMounted, computed, watch } from 'vue';
  import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
  import CourseChapter from './components/CourseChapter.vue';
  import courseImg from '@/assets/images/course.png';
  import { useModal } from '/@/components/Modal';
  import EmptyImg from '@/assets/images/empty_new.png';
  import SchoolCourseModal from './components/SchoolCourseModal.vue';
  import { list, deleteOne, release, save, saveOrUpdate, edit } from './SchoolCourse.api';
  import type { record } from './type';
  import { useRouter } from 'vue-router';
  const content = ref('');
  const router = useRouter();
  const flag = ref(true);
  // const  chapter = ref(false)//章节管理默认不展示
  const chapter = ref(false); // test
  const total = ref(0);
  import pagenation from '@/components/customPagenation/index.vue';
  import { localStorageUtil } from '/@/utils/storage';
  import { Empty } from 'ant-design-vue';
  const currentPage = ref(1);
  const pageSize = ref(2);
  const courseList = ref<record[]>([]);
  const courseName = ref('');
  const parentId = ref('');
  const isUpdate = ref(false);
  const selctedId = ref('');

  const [registerModal, { openModal }] = useModal();
  onMounted(() => {
    getCourseList();
  });
  // const [register, { openModal: openDetail }] = useModal();
  // const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

  const getCourseList = async () => {
    try {
      const res = await list({ pageNo: currentPage.value, pageSize: pageSize.value });
      console.log(res, 'list');

      courseList.value = res.records;

      total.value = res.total;
    } catch (error) {
      console.log(error);
    }
  };
  const handleSelected = (data) => {
    content.value = data.courseContent || '';
    selctedId.value = data.id;
    if (data.courseContent != '' && data.coureName != '') {
      isUpdate.value = true;
    } else {
      isUpdate.value = false;
    }
  };
  const handleCourseName = (data) => {
    console.log('handleCourseName', data);
    courseName.value = data.courseName;
    parentId.value = data.parentId;
  };
  const handleSearch = async (e) => {
    console.log(e.target.value, 'e.target.value');
    try {
      const res = await list({ pageNo: currentPage.value, pageSize: pageSize.value, likeName: e.target.value });
      console.log(res, 'seachlist');
      courseList.value = res.records;
    } catch (error) {}
  };
  const handleback = () => {
    chapter.value = false;
  };
  const handlePublish = async (record) => {
    console.log('handlePublish', record);

    try {
      const res = await release({ idList: [record.id] });
      console.log(res, 'release');
      await getCourseList();
    } catch (error) {
      console.log('发布失败', error);
    }
  };
  const addChapter = async () => {
    console.log(parentId.value, 'parentId');
    console.log('保存');

    try {
      const params = {
        parentId: parentId.value,
        courseName: courseName.value,
        courseDescribe: '',
        courseContent: content.value,
      };

      if (isUpdate.value) {
        await edit({ ...params, id: selctedId.value });
        chapter.value = false;
        getCourseList();
        content.value = '';
      } else {
        await save(params);
        chapter.value = false;
        getCourseList();
        content.value = '';
      }

      // 更新本地树数据
    } catch (error) {
      console.log('编辑失败');
    }
  };
  const handleAdd = () => {
    console.log('handleAdd');
    openModal(true, {
      isUpdate: false,
      showFooter: true,
    });
  };
  const handleEdit = (record) => {
    console.log('handleEdit', record);
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  };
  const handlePageChange = async (pageNo: number) => {
    console.log('page', pageNo);
    currentPage.value = pageNo;
    getCourseList();
  };
  const handleSizeChange = async (Size: number) => {
    console.log('pageSize', Size);
    pageSize.value = Size;
    getCourseList();
  };
  const handleChapter = async (record) => {
    console.log('handleChapter', record.id);

    localStorage.setItem('schoolCourseId', String(record.id));

    chapter.value = true;
  };

  /**
   * 成功回调
   */
  async function handleSuccess() {
    await getCourseList();
  }
  const handleDelete = async (item: any) => {
    try {
      await deleteOne({ id: item.id });
      getCourseList();
    } catch (error) {
      console.log(error);
    }
  };
</script>
<style scoped lang="less">
  .rounded-input {
    border-radius: 20px;
  }
  .Course-container {
    margin-top: 10px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .content {
    .coureItem {
      position: relative;
      border: 1px solid #e9ebf2;
      border-radius: 8px;
      margin: 15px 0;
      height: 250px;
      display: flex;
      align-items: start;
      padding: 20px;
      .left {
        width: 344px;
        height: 200px;
        // margin: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        margin-left: 20px;
        .title {
          font-size: 20px;
          color: #000000;
        }
        .flx {
          display: flex;
          margin: 6px 0;
          .subtitle {
            width: 80px;
            font-size: 14px;
            color: #999999;
          }
          span {
            flex: 1;
            color: #000000;
          }
          .txt {
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制显示为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .buttonGroup {
        position: absolute;
        top: 10px;
        right: 10px;
        .ant-btn {
          margin-left: 3px;
        }
      }
    }
  }
  .imgtip {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .noCourceBtn {
    position: fixed;
    top: 15vh;
    right: 5vw;
  }
  .chapters {
    display: flex;

    height: calc(100vh - 110px);
    padding-top: 8px;
    overflow: hidden;
    .chapterTree {
      width: 25%;
      // height: 100vh;
      border-radius: 25px;
      padding: 10px;
      height: 98%;
      background: #ffffff;
      margin: 0 8px;
    }
    .editor {
      flex: 1;
      height: 90%;

      margin-right: 10px;

      .head {
        height: 50px;
        align-items: center;
        border: 1px solid #eee;
        background: #ffffff;
        display: flex;
        padding-right: 10px;

        .right-button {
          margin-left: auto;
        }
      }
      .jeecg-tinymce-container {
        :deep(.tox.tox-tinymce) {
          // height: 100vh !important;

          min-height: 80vh !important;
        }
      }
    }
  }
</style>
<style lang="less"></style>
